<template>
  <Layout style="height:100%">
    <Content style="margin-left:20px">
      <template>
        <Button type="text" ghost style="color:#11aef4;margin:3px 5px" @click="treeType=1;getList()">新闻</Button>
        <Button type="text" ghost style="color:#11aef4;margin:3px 5px" @click="treeType=2;getList()">产品</Button>
        <!-- {{this.treeType}} -->
      </template>
      <Tree :data="data1" @on-select-change="selectTree"></Tree>
    </Content>
    <Sider style="background:#e3e0d9;padding:15px 20px">
      <template>
        <Form :model="formTop" label-position="top">
          <FormItem label="Parent：">
            <Input v-model="formTop.inputParent"></Input>
          </FormItem>
          <FormItem label="Children：">
            <Input v-model="formTop.inputChldren"></Input>
          </FormItem>
          <FormItem label="Type：">
            <Input v-model="formTop.inputType"></Input>
          </FormItem>
        </Form>
      </template>
      <template>
        <Button type="primary" ghost style="margin-bottom:10px;width:70px;" @click="addTree(type)">Add</Button>
        <Button
          type="primary"
          ghost
          style="margin-bottom:10px;width:70px;float:right"
          @click="updateTree(type)"
        >Update</Button>
        <Button type="primary" ghost style="margin-bottom:10px;width:70px;" @click="delTree(type)">Del</Button>
        <Button
          type="primary"
          ghost
          style="margin-bottom:10px;width:70px;float:right"
          @click="clearForm()"
        >Clear</Button>
      </template>
    </Sider>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      data1: [],
      formTop: {
        inputParent: "",
        inputChldren: "",
        inputType: ""
      },
      selectedObject: [],
      delIds: [],
      resultToString: "",
      delResult: [],
      treeType: "1",
    };
  },

  methods: {
    getList() {
      this.axios({
        url: `http://localhost:3000/cate/list/${this.treeType}`,
        method: "post"
      }).then(res => {
        this.data1 = res.data;
        //this.data1[expand]=true;
      });
    },
    clearForm() {
      this.formTop.inputParent = "";
      this.formTop.inputChldren = "";
      this.formTop.inputType = "";
    },
    selectTree(arr) {
      //console.log(arr);
      this.selectedObject = arr;
      this.formTop.inputParent = arr[0]._id;
      this.formTop.inputChldren = arr[0].title;
      this.formTop.inputType = arr[0].type;
    },
    addTree() {
      var inputParent = this.formTop.inputParent;
      var inputChldren = this.formTop.inputChldren;
      var inputType = this.formTop.inputType;
      if (inputParent && inputParent.length > 0) {
        this.axios({
          url: "http://localhost:3000/cate",
          method: "post",
          data: {
            parentId: inputParent,
            title: inputChldren,
            type: inputType
          }
        }).then(res => {
          this.getList(this.treeType);
          this.clearForm();
        });
      } else {
        this.axios({
          url: "http://localhost:3000/cate",
          method: "post",
          data: {
            title: inputChldren,
            type: inputType
          }
        }).then(res => {
          this.getList();
          this.clearForm();
        });
      }
    },
    updateTree() {
      this.axios({
        url: `http://localhost:3000/cate/${this.formTop.inputParent}`,
        method: "put",
        data: {
          title: this.formTop.inputChldren
        }
      }).then(res => {
        this.getList(this.treeType);
        this.clearForm();
      });
    },
    delTree() {
      this.delIds = [];
      //console.log(this.selectedObject);
      this.fu(this.selectedObject);
      //console.log(this.delIds);
      //this.delIds = Array.from(new Set(this.delIds));
      this.axios({
        url: `http://localhost:3000/cate/${this.formTop.inputParent}`,
        method: "delete",
        data: {
          ids: this.delIds.toString()
        }
      }).then(res => {
        this.getList(this.treeType);
        this.clearForm();
      });
    },
    fu(arr) {
      for (var i = 0, len = arr.length; i < len; i++) {
        this.delIds.push(arr[i]._id);
        if (arr[i].children) {
          this.fu(arr[i].children);
        }
      }
      return this.delIds;
    }
  },
  computed: {},
  mounted() {
    this.getList();
  }
};
</script>